<template>
    <div class="my-header">
       <slot></slot>
       <input type="text" :value="value" @input="$emit('input',$event.target.value)" @keydown.enter="add">
    </div>
</template>
<script>
export default {
    props:['value'],
    methods: {
        input(e){
          this.$emit('input',e.target.value)
          console.log(e.target.value);
        },
        add(){
            this.$emit('enter')
        }
    },
}
</script>
<style lang="scss" scoped>
.my-header{
    height: 60px;
    line-height: 60px;
    background: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    input{
        width: 500px;
        height: 30px;
        border-radius: 8px;
        border: none;
        margin-left: 30px;
    }
}
</style>
